<template>
  <div style="height: 100%;overflow-y: auto;background-color: #112E3E;">
  <div class="app">
    <el-form ref="ruleFormRef" style="width: 700px" :model="formData" :rules="rules">
      <el-form-item label="溯源标题" prop="title">
        <el-input v-model="formData.title" style="width: 200px" placeholder="请输入溯源标题" clearable />
      </el-form-item>
      <em></em>
      <p>农场信息</p>
      <el-form-item label="选择地块" prop="block">
        <el-select v-model="formData.block" placeholder="选择地块" style="width: 200px">
          <el-option value="1号地" />
          <el-option value="2号地" />
          <el-option value="3号地" />
          <el-option value="4号地" />
          <el-option value="5号地" />
        </el-select>
      </el-form-item>
      <div style="display: flex; justify-content: space-between">
        <el-form-item label="选择品种" prop="pinzhong">
          <el-select v-model="formData.pinzhong" placeholder="选择品种" style="width: 200px">
            <el-option value="品种1" />
            <el-option value="品种2" />
            <el-option value="品种3" />
            <el-option value="品种4" />
            <el-option value="品种5" />
          </el-select>
        </el-form-item>
        <el-form-item label="选择种类" prop="zhonglei">
          <el-select v-model="formData.zhonglei" placeholder="选择种类" style="width: 200px">
            <el-option value="种类1" />
            <el-option value="种类2" />
            <el-option value="种类3" />
            <el-option value="种类4" />
            <el-option value="种类5" />
          </el-select>
        </el-form-item>
      </div>
      <div style="display: flex; justify-content: space-between">
        <el-form-item label="品种特性" prop="pinzhongtexing">
          <el-input
            v-model="formData.pinzhongtexing"
            style="width: 200px"
            placeholder="请输入品种特性"
          />
        </el-form-item>
        <el-form-item label="电商购买链接" prop="lianjie">
          <el-input v-model="formData.dianshanggoumailianjie" style="width: 200px" clearable />
        </el-form-item>
      </div>
      <em></em>
      <p>产地环境</p>
      <el-form-item label="农场主" prop="nongchangzhu">
        <el-select v-model="formData.nongchangzhu" placeholder="选择农场主" style="width: 200px">
          <el-option value="张三" />
          <el-option value="李四" />
        </el-select>
        <el-button style="margin-left: 10px; background-color: #409eff; color: #fff; padding: 0 5px"
          >添加</el-button
        >
      </el-form-item>
      <el-form-item label="农场地址" prop="nongchangdizhi">
        <el-input v-model="formData.nongchangdizhi" style="width: 200px" />
      </el-form-item>
      <el-form-item
        label="农场环境"
        prop="nongchanghuanjingUrl"
        label-width="120"
        style="margin: 15px 0 5px;"
        class="env-label"
      >
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :auto-upload="false"
          data="desc"
          :on-change="(file: UploadFile, type: string) => changeHandler(file, 'nongchanghuanjing')"
        >
          <img
            v-if="formData.nongchanghuanjingUrl"
            :src="formData.nongchanghuanjingUrl"
            class="avatar"
          />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="环境安全报告" prop="desc" label-width="120" style="margin-bottom: 10px"class="env-label">
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="(file: UploadFile, type: string) => changeHandler(file, 'huanjinganquanBG')"
        >
          <el-icon v-if="!formData.huanjinganquanBGUrl" class="avatar-uploader-icon"
            ><Plus
          /></el-icon>
        </el-upload>
        <a
          v-if="formData.huanjinganquanBGUrl"
          :src="formData.huanjinganquanBGUrl"
          :href="formData.huanjinganquanBGUrl"
          >{{ formData.huanjinganquanBGName }}</a
        >
        <el-button
          :style="{
            marginLeft: '10px',
            backgroundColor: '#409eff',
            color: '#fff',
            padding: '0 5px',
            height: formData.huanjinganquanBGUrl ? '20px' : '30px',
            fontSize: '12px',
          }"
          @click="formData.huanjinganquanBGUrl = ''"
          >删除上传文件</el-button
        >
      </el-form-item>

      <el-form-item label="地块土地检测含量" prop="desc" style="margin-bottom: 10px"class="env-label">
        <el-button style="margin-left: 10px; background-color: #409eff; color: #fff; padding: 0 5px"
          >查看</el-button
        >
      </el-form-item>

      <el-form-item label="农场面积" prop="nongchangmianji">
        <el-input v-model="formData.nongchangmianji" type="text" style="width: 200px" />亩
        <br />
      </el-form-item>

      <el-form-item label="树龄" prop="shuling">
        <el-input v-model="formData.shuling" type="text" style="width: 200px" />年
      </el-form-item>

      <el-form-item label="亩产量" prop="muchanliang">
        <el-input v-model="formData.muchanliang" type="text" style="width: 200px" />kg/亩
      </el-form-item>
      <em></em>
      <p>品质检测过程</p>

      <el-form-item label="检测时间" prop="jianceshijian">
        <el-date-picker
          v-model="formData.jianceshijian"
          type="date"
          placeholder="选择检测时间"
          clearable
        />
      </el-form-item>

      <el-form-item label="上传照片" prop="desc" label-width="120"class="env-label">
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="(file: UploadFile, type: string) => changeHandler(file, 'pinzhijiance')"
        >
          <img v-if="formData.pinzhijianceUrl" :src="formData.pinzhijianceUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <em></em>
      <p>采后信息</p>
      <el-form-item label="是否成熟" prop="chengshu">
        <el-radio-group v-model="formData.chengshu">
          <el-radio :value="true">是</el-radio>
          <el-radio :value="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="选择采收时间" prop="caishoushijian">
        <el-date-picker
          v-model="formData.caishoushijian"
          type="date"
          placeholder="选择采收时间"
          clearable
        /> </el-form-item
      ><el-form-item label="采收负责人" prop="caishoufzr">
        <el-select v-model="formData.caishoufzr" placeholder="选择负责人" style="width: 220px">
          <el-option value="负责人一" />
          <el-option value="负责人二" />
        </el-select> </el-form-item
      ><el-form-item label="采后检测时间" prop="jianceshijian">
        <el-date-picker
          v-model="formData.caihoujianceshijian"
          type="date"
          placeholder="选择检测时间"
          clearable
        /> </el-form-item
      ><el-form-item label="检测人" prop="jianceren">
        <el-input v-model="formData.jianceren" type="text" style="width: 220px" /> </el-form-item
      ><el-form-item label="检测结果" prop="jiancejieguo">
        <el-select v-model="formData.jiancejieguo" placeholder="检测结果" style="width: 220px">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select> </el-form-item
      ><el-form-item label="产后品质检测" prop="canhoupinzhijianceUrl"class="env-label">
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="(file: UploadFile, type: string) => changeHandler(file, 'canhoupinzhijiance')"
        >
          <img
            v-if="formData.canhoupinzhijianceUrl"
            :src="formData.canhoupinzhijianceUrl"
            class="avatar"
          />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-form-item label="预冷时间">
          <el-date-picker
            v-model="formData.yulengshijian"
            type="date"
            placeholder="选择预冷时间"
            clearable
          />
        </el-form-item>
        <el-form-item label="预冷负责人" prop="yulengfzr" label-width="120">
          <el-input v-model="formData.yulengfzr" type="text" style="width: 160px" />

          <el-button
            style="margin-left: 10px; background-color: #409eff; color: #fff; padding: 0 5px"
            >添加</el-button
          >
        </el-form-item>
        <el-form-item label="预冷图片" prop="desc" label-width="120"class="env-label">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :auto-upload="false"
            :on-change="(file: UploadFile, type: string) => changeHandler(file, 'yuleng')"
          >
            <img v-if="formData.yulengUrl" :src="formData.yulengUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form-item>
      <el-form-item class="btns">
        <el-button class="cancel" type="default" @click="cancelForm(ruleFormRef)" style="background-color: none!;"> 取消 </el-button>
        <el-button class="save" type="default" @click="saveForm(ruleFormRef)">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps(['curId', 'formDataListIndex'])
const emits = defineEmits(['changeCurId'])
import { watch, ref, reactive, type Ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import type { UploadFile } from 'element-plus'
import { useSuYuanStore } from '@/stores/SuYuanStore'
const SuYuanStore = useSuYuanStore()
import OSS, { type PutObjectResult } from 'ali-oss'
import type { FormInstance, FormRules } from 'element-plus'
import { compose } from 'element-plus/es/components/table/src/util.mjs'
interface RuleForm extends Record<string, string | number | boolean> {
  title: string
  block: number | string
  pinzhong: string
  zhonglei: string
  pinzhongtexing: string
  dianshanggoumailianjie: string
  nongchangzhu: string
  nongchangdizhi: string
  nongchangmianji: number | string
  shuling: number | string
  muchanliang: number | string
  chengshu: boolean
  caishoushijian: string
  caishoufzr: string
  jianceshijian: string
  jianceren: string
  jiancejieguo: string
  yulengshijian: string
  yulengfzr: string
  huanjinganquanBGUrl: string
  huanjinganquanBGName: string
  caihoujianceshijian: string
  pinzhijianceUrl: string
  nongchanghuanjingUrl: string
  canhoupinzhijianceUrl: string
  yulengUrl: string
  time: string
  count: number
}
const ruleFormRef = ref<FormInstance>()
const originFormData = reactive<RuleForm>({
  title: '',
  block: '',
  pinzhong: '',
  zhonglei: '',
  pinzhongtexing: '',
  dianshanggoumailianjie: '',
  nongchangzhu: '',
  nongchangdizhi: '',
  nongchangmianji: '',
  shuling: '',
  muchanliang: '',
  chengshu: false,
  caishoushijian: '',
  caishoufzr: '',
  jianceshijian: '',
  jianceren: '',
  jiancejieguo: '',
  yulengshijian: '',
  yulengfzr: '',
  huanjinganquanBGUrl: '',
  huanjinganquanBGName: '',
  nongchanghuanjingUrl: '',
  caihoujianceshijian: '',
  pinzhijianceUrl: '',
  canhoupinzhijianceUrl: '',
  yulengUrl: '',
  time: '',
  count: 0,
})
const formData = ref<RuleForm>({
  title: '',
  block: '',
  pinzhong: '',
  zhonglei: '',
  pinzhongtexing: '',
  dianshanggoumailianjie: '',
  nongchangzhu: '',
  nongchangdizhi: '',
  nongchangmianji: '',
  shuling: '',
  muchanliang: '',
  chengshu: false,
  caishoushijian: '',
  caishoufzr: '',
  jianceshijian: '',
  jianceren: '',
  jiancejieguo: '',
  yulengshijian: '',
  yulengfzr: '',
  huanjinganquanBGUrl: '',
  huanjinganquanBGName: '',
  nongchanghuanjingUrl: '',
  caihoujianceshijian: '',
  pinzhijianceUrl: '',
  canhoupinzhijianceUrl: '',
  yulengUrl: '',
  time: '',
  count: 0,
})
const rules = reactive<FormRules<RuleForm>>({
  title: [
    { required: true, message: '请输入溯源标题', trigger: 'blur' },
    { min: 3, max: 15, message: '长度应为 3 到 15', trigger: 'blur' },
  ],
  block: [
    {
      required: true,
      message: '选择地块',
      trigger: 'blur',
    },
  ],
  pinzhongtexing: [
    {
      required: true,
      message: '请输入品种特性',
      trigger: 'blur',
    },
  ],
  nongchangzhu: [
    {
      required: true,
      message: '请输入农场主',
      trigger: 'blur',
    },
  ],
  nongchangdizhi: [
    {
      required: true,
      message: '请输入农场地址',
      trigger: 'blur',
    },
  ],
  nongchanghuanjingUrl: [
    {
      required: true,
      message: '请上传农场环境',
      trigger: 'blur',
    },
  ],
  nongchangmianji: [
    {
      required: true,
      message: '请输入农场面积',
      trigger: 'blur',
    },
  ],
  shuling: [
    {
      required: true,
      message: '请输入树龄',
      trigger: 'blur',
    },
  ],
  muchanliang: [
    {
      required: true,
      message: '请输入亩产量',
      trigger: 'blur',
    },
  ],
  chengshu: [
    {
      required: true,
      message: '请选择是否成熟',
      trigger: 'blur',
    },
  ],
  caishoushijian: [
    {
      required: true,
      message: '请选择采收时间',
      trigger: 'blur',
    },
  ],
  jianceshijian: [
    {
      required: true,
      message: '请选择检测时间',
      trigger: 'blur',
    },
  ],
  jianceren: [
    {
      required: true,
      message: '请输入检测人员',
      trigger: 'blur',
    },
  ],
  jiancejieguo: [
    {
      required: true,
      message: '请选择检测结果',
      trigger: 'blur',
    },
  ],
  canhoupinzhijianceUrl: [
    {
      required: true,
      message: '请上传产后品质检测',
      trigger: 'blur',
    },
  ],
})
const oss: OSS = new OSS({
  region: 'oss-cn-beijing',
  accessKeyId: 'LTAI5t7SyttyUaFc6JYrpzis',
  accessKeySecret: 'Ab0LFCOtXgXDq6rR4H5eqaPlZ7Zp7u',
  bucket: 'ttrx',
})
watch(
  () => SuYuanStore.formDataList[props.formDataListIndex],
  (value) => {
    console.log(value)
    formData.value = SuYuanStore.formDataList[props.formDataListIndex]
  },
  {
    deep: true,
  },
)
const cancelForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formData.value = { ...originFormData }
  emits('changeCurId', 0)
}
const saveForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      formData.value.time = formData.value.time ? formData.value.time : new Date().toLocaleString()
      if (
        SuYuanStore.formDataList.some((item) => {
          item.time !== formData.value.time
        })
      ) {
        console.log('新增')
        SuYuanStore.formDataList.push({ ...formData.value })
      } else {
        console.log('修改')
        SuYuanStore.formDataList[props.formDataListIndex] = { ...formData.value }
      }
    }
    formData.value = { ...originFormData }
    emits('changeCurId', 0)
  })
}
const changeHandler = (file: UploadFile, type: string) => {
  oss.put(file.name, file.raw).then((value: PutObjectResult) => {
    switch (type) {
      case 'nongchanghuanjing':
        formData.value.nongchanghuanjingUrl = value.url
        break
      case 'huanjinganquanBG':
        formData.value.huanjinganquanBGUrl = value.url
        formData.value.huanjinganquanBGName = value.name
        break
      case 'pinzhijiance':
        formData.value.pinzhijianceUrl = value.url
        break
      case 'canhoupinzhijiance':
        formData.value.canhoupinzhijianceUrl = value.url
        break
      case 'yuleng':
        formData.value.yulengUrl = value.url
        break
    }
  })
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.app {
  width: 800px;
  margin: 10px auto 0;
  background-color: #112E3E;
  border-radius: 5px;
  border: 0px solid #ccc;
  padding: 20px;
  em {
    width: 760px;
    display: inline-block;
    border-bottom: 1px solid #706e6e;
  }
}
.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  display: block;
}
::v-deep(.env-label .el-form-item__label) {
  color: white; // 你想要的颜色
}
p{
  font-size: 18px;
  color:#bababa;
}
.el-button{
background-color: #358C90!important;
  border:0;
  color: white!important;
  padding-left: 40px;
  padding-right: 40px;
}
::v-deep(.el-input__inner) {
  background-color: #2C4353;
  border: 0; 
   outline: none;// 你想要的颜色

}
::v-deep(.el-input__wrapper) {
  background-color: #2C4353;
  border: 0;  // 你想要的颜色
  outline: none;
}
:deep(.transparent-select .el-select__wrapper) {
    // 触发框背景透明
    // background-color: #2C4353 !important;
    // 去除默认边框
    border: none !important;
    // 去除聚焦时的阴影
    box-shadow: none !important;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}
label {
  width: 120px;
  margin: 3px 0;
  color: white!important;
}
.btns {
  width: 700px;
  margin: 10px auto;
  text-align: center;
  button {
    margin: 0 10px;
    width: 30px;
    background-color: antiquewhite;
    padding: 15px 25px;
    font-size: 15px;
    border-radius: 5px;
    height: 15px;
  }
  .cancel {
    margin-left: 300px;
  }
}

</style>
